<template>
	<view>
		<view class="p-30">
			<view class="font-40 font-weight">{{title||'涉嫌诈骗'}}</view>
			<view class="grey font-24 m-t-10">请详细填写举报理由</view>
			<view class="font-weight m-t-60">图片证据<text class="grey m-l-20">{{ImageUrl.length}}/4</text></view>
			<view class="flex">
				<image v-if="ImageUrl.length<4" class="w-160 h-160 m-t-30 m-r-10" @click="addImage" src="../../static/icon/addimg.png" mode=""></image>
				<view v-for="(item,i) in ImageUrl" :key="i" class="closeBox">
					<view class="iconfont icon-guanbishixin closeBoxItem" @click="close(i)"></view>
					<image class="w-160 h-160 m-t-30 bor-10 m-r-10" @click="addImage" :src="$util.img(item)" mode=""></image>
				</view>
			</view>
			<view class="font-weight m-t-60 m-b-20">举报描述<text class="grey m-l-20">{{remark.length}}/100</text></view>
			<textarea v-model="remark" name="" maxlength="100" placeholder="请填写举报描述" placeholder-class="font-28 grey" id="" cols="30" rows="10"></textarea>
		</view>
		
		<view class="bomPosition">
			<button type="primary" @click="preserve">举报</button>
		</view>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import base from "@/common/js/config.js"
	export default {
		data() {
			return {
				title:'',
				remark:'',
				detali:{},
				report_type_id:'',
				mobile:'',
				ImageUrl:[]
			};
		},
		onLoad(res) {
			this.report_type_id = res.id
			this.title = res.title
			this.mobile = res.mobile
		},
		methods:{
			close(i) {
				this.ImageUrl.splice(i,1)
			},
			// 添加图片
			addImage() {
				uni.chooseImage({
					count: 4-this.ImageUrl.length,
					success: res => {
						res.tempFilePaths.forEach((item, i) => {
							wx.showLoading({
								title: '上传中(' + (i + 1) + '/' +
									res.tempFilePaths.length + ')'
							})
							uni.uploadFile({
								url: `${base.baseUrl}api/Common/upload`,
								filePath: item,
								name: 'file',
								success: resA => {
									let a = JSON.parse(resA.data)
									this.ImageUrl.push(a.data.fullurl)
									console.log(this.ImageUrl,'=-=-=');
								},
								fail: errA => {
									console.log(errA);
								}
							});
							if (i + 1 == res.tempFilePaths.length) {
								wx.hideLoading()
							}
						})
			
					},
					fail(err) {
						console.log(err);
					}
				})
			
			},
			preserve() {
				this.$api.sendRequest({
					url:'/api/Report/reportuser',
					data:{
						mobile:this.mobile,
						images:this.ImageUrl.toString(),
						report_type_id:this.report_type_id,
						remark:this.remark
					},success:res=>{
						this.$refs.toast.show({
							type: 'default',
							message: res.msg,
						})
						if(res.code==1) {
							setTimeout(()=>{
								uni.navigateBack({
									delta:2
								})
							},1500)
							
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.closeBox {
	position: relative;
	.closeBoxItem {
		position: absolute;
		top: 10rpx;
		right: -5rpx;
		color: #ca1b1e;
		font-size: 36rpx;
	}
}
</style>
